<!--
 * @Author: your name
 * @Date: 2021-05-27 15:18:34
 * @LastEditTime: 2021-06-15 14:37:52
 * @LastEditors: helei
 * @Description: 评论组件
 * @FilePath: \tourismpc\src\components\comment\index.vue
-->
<template>
  <div class="comment">
    <div class="title">全部回复</div>
    <el-divider></el-divider>
    <div class="commentInput">
      <div class="userAvatar">
        <el-avatar
          fit="fill"
          :src="
            userInfo && userInfo.headsImg ? userInfo.headsImg : avatarDefault
          "
        ></el-avatar>
      </div>
      <div class="textarea">
        <el-input
          type="textarea"
          :autosize="{ minRows: 6, maxRows: 6 }"
          placeholder="请输入想说的话"
          v-model="textarea"
        ></el-input>
      </div>
    </div>
    <div class="replyBox">
      <div class="replyButton" @click="evaluatePro">发表回复</div>
    </div>
    <div class="otherComments">
      <div class="commentItem" v-for="(item, i) in showContent" :key="i">
        <div class="userAvatar">
          <el-avatar
            fit="fill"
            :src="item.headsId ? item.headsId : avatarDefault"
            alt
          />
        </div>
        <div class="tips">
          <div>{{ item.nikeName }}</div>
          <div class="time">{{ item.reviewsTime }} 发布</div>
          <div class="content">{{ item.reviewsContent }}</div>
        </div>
      </div>
    </div>
    <div class="footer">
      <el-pagination
        v-if="content && content.length"
        prev-text="上一页"
        next-text="下一页"
        background
        :page-size="5"
        hide-on-single-page
        :current-page="currentPage"
        @current-change="changePage"
        layout="prev, pager, next"
        :total="content.length"
      >
      </el-pagination>
    </div>
  </div>
</template>

<script>
import { get_data } from "../../utils/utils";
export default {
  name: "Comment",
  props: ["content", "productId", "type"],
  data() {
    return {
      textarea: "",
      currentPage: 1,
      userInfo: {},
      avatarDefault:
        "https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png",
    };
  },
  mounted() {
    if (get_data("token")) {
      this.userInfo = JSON.parse(get_data("userInfo"));
    }
  },
  computed: {
    showContent() {
      if (this.content && this.content.length) {
        let start = (this.currentPage - 1) * 5;
        return this.content.slice(start, start + 5);
      } else {
        return [];
      }
    },
  },
  methods: {
    changePage(val) {
      this.currentPage = val;
    },
    evaluatePro() {
      if (get_data("token")) {
        let url = "";
        let data = {};
        if (this.type == 1) {
          url = this.$apiPath.evaluatePro;
          data = {
            customerId: this.userInfo.id,
            productId: this.productId,
            reviewsContent: this.textarea,
          };
        } else if (this.type == 2) {
          url = this.$apiPath.addPandaReviews;
          data = {
            customerId: this.userInfo.id,
            reviewsContent: this.textarea,
            pandaId: this.productId,
          };
        } else {
          url = this.$apiPath.addComment;
          data = {
            tourId: this.productId,
            reviewsContent: this.textarea,
            customerId: this.userInfo.id,
          };
        }
        this.$http
          .fetch(url, {
            method: "post",
            data: { ...data },
          })
          .then((res) => {
            if (res.code === 200) {
              this.content.unshift({
                headsId: this.userInfo.headsImg,
                nikeName: this.userInfo.nikeName,
                reviewsContent: this.textarea,
                reviewsTime: "刚刚",
              });

              this.$message.success(res.msg);
              this.textarea = "";
              this.currentPage = 1;
            }
          })
          .catch((res) => {
            if (res.data.code === 400) {
              // this.$message.info(res.data.msg);
              this.textarea = "";
            }
          });
      } else {
        this.$router.push({
          path: "/login",
        });
      }
    },
  },
};
</script>

<style lang="less">
@import "./index.less";
</style>
